<template>
  <div class="create-sop-group-main">
    <NavigationBarBack title="创建群SOP" />
    <div class="create-sop-group-wrap">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">规则设置</div>
          </div>
          <div class="card-body">
            <div class="alter-box">
              <div class="warning-svg">
                <svg-icon class-name="warning-svg" icon-class="warning" />
              </div>
              <div class="waring-text">
                <div>
                  根据群标签、群人数（可选）自动创建群SOP计划任务；创建规则后需应用到单号模式下生效，也可在单号模式下个性配置；
                </div>
              </div>
            </div>
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              class="create-sop-group-form"
              label-position="left"
            >
              <el-form-item label="所属公司：">
                <div class="company-name">安徽志新科技有限公司</div>
              </el-form-item>
              <el-form-item label="触发条件：">
                <div class="group-content">
                  <div class="group-item">
                    <label>群标签（必填）：</label>
                    <div v-if="groupLabel" class="tagbox f-12 mr-12">
                      {{groupLabel.label}}<i class="el-icon-close pl-5" @click="cleanLabel"></i>
                    </div>
                    <el-button
                      size="small"
                      plain
                      @click.native="showCheckTag = true"
                      >{{groupLabel?'重新':''}}选择群标签</el-button
                    >
                  </div>
                  <div class="group-item">
                    <label>群人数（选填）：</label>
                    <div class="context">
                      首次达到或超过
                      <el-input
                        size="small"
                        style="width: 78px; margin: 0 4px"
                      />人
                      <a
                        style="margin-left: 10px; color: #3070ff"
                        @click="showExample = true"
                        >查看示例</a
                      >
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="SOP模版：" class="mb-0">
                <el-select
                  v-model="form.labeltype"
                  placeholder=""
                  size="small"
                  style="width: 115px"
                >
                  <el-option label="企业模板库" :value="1"></el-option>
                  <el-option label="个人模板库" :value="2"></el-option>
                </el-select>
                <sop-select v-model="form.labeltype" :list='standList' />
                <!-- <el-select
                  v-model="form.labeltype"
                  placeholder=""
                  size="small"
                  style="width: 340px"
                >
                  <el-option label="含任意关键词" :value="0">
                    <span class="select-label">11111</span>
                    <span class="select-tag">标准模板</span>
                  </el-option>
                  <el-option label="含任意关键词" :value="1">
                    <span class="select-label">11111</span>
                    <span class="select-tag">标准模板</span>
                  </el-option>
                </el-select> -->
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="small"
                  style="margin-left: 8px"
                />
                <div class="desc">标准SOP只能调用“标准模板”</div>
              </el-form-item>
              <el-form-item label="">
                <div class="sopcontent">
                  <sop-content :planList="form.planList" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <select-tag v-if="showCheckTag" :visableIf.sync="showCheckTag" :label='groupLabel' @submit='submitTag' />
    <!-- <SelectTagDialog :visable="showCheckTag" @handCloseDialog="onHanleCloseCheckTagDialog" /> -->
    <el-dialog
      :visible="showExample"
      @close="handleCloseDialog"
      width="416px"
      append-to-body
      custom-class="example-dialog"
    >
      <div class="example-body">
        <div class="example-head">
          <svg-icon
            class-name="warning-svg"
            icon-class="warning"
            class="warning-icon"
          />
          <span class="title">群人数触发规则</span>
        </div>
        <div class="context">
          <div style="margin-bottom: 5px">
            当群成员数第一次增加到或者超过设置人数时，才会触发；一个群触发一次后，后面无论增加减少都不会再触发；
          </div>
          举例：设置群成员满100时自动加入；<br />
          1、某群A现成员数95人（未满100人），继续增加，第一次增加至100人时，会触发；<br />
          2、某群B现成员数105人（已满100人），继续增加不会触发，减少到100人以下，再第一次增加到100人时，会触发。<br />
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="handleCloseDialog">知道了</el-button>
      </div>
    </el-dialog>
    <div class="create-sop-group-footer">
      <el-button size="small" plain>取消</el-button>
      <el-button size="small" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import MultipleSelect from "@/components/MultipleSelect";
import NavigationBarBack from "@/components/NavigationBarBack";
import SelectTag from "@/components/SelectTag";
import SopContent from '../components/SopContent.vue';
import SopSelect from './components/SopSelect.vue';
export default {
  data() {
    return {
      customer: 0,
      showCheckTag: false,
      showExample: false,
      groupLabel:null,
      form: {
        customer: 0,
        customerGroup: 0,
        switch: false,
        labeltype: 1,
        radio: 2,
        gender: [1],
        planList: [
          { id: 1, content: "" },
          { id: 2, content: "" },
        ],
      },
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
    };
  },
  components: {
    NavigationBarBack,
    MultipleSelect,
    SelectTag,
    SopContent,
    SopSelect
  },
  methods: {
    onHanleCloseCheckTagDialog() {
      this.showCheckTag = false;
    },
    handleCloseDialog() {
      this.showExample = false;
    },

    submitTag(val){
      this.groupLabel=val
    },

    cleanLabel(){
      this.groupLabel = null
    }
  },
};
</script>
<style lang="scss" scoped>
.create-sop-group-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
  .create-sop-group-wrap {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }

        .card-body {
          padding: 24px;

          .alter-box {
            box-sizing: border-box;
            margin: 0;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;

            .warning-svg {
              font-size: 18px;
            }

            .waring-text {
              margin-left: 8px;
            }
          }

          .create-sop-group-form {
            margin-top: 20px;
            .flex-rows-tag {
              display: grid;
              column-gap: 8px;
              grid-template-columns: 136px 500px;
              &:not(:first-child) {
                margin-top: 10px;
              }
            }
            .group-content {
              padding: 16px;
              margin-bottom: 10px;
              background-color: rgb(245, 245, 245);
              .group-item {
                display: flex;
                align-items: center;
                &:not(:last-child) {
                  margin-bottom: 20px;
                }
                label {
                  font-weight: 400;
                }
              }
            }
            .desc {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
              margin: 8px 0px 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  .create-sop-group-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.select-label {
  float: left;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}
.select-tag {
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 2px 7px;
  float: right;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  margin: auto;
}
.example-body {
  padding: 2px 2px 4px;
  .example-head {
    display: flex;
    align-items: center;
    .warning-icon {
      font-size: 30px;
      margin-right: 16px;
    }
    .title {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.4;
    }
  }
  .context {
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    margin-left: 46px;
  }
}
.tagbox {
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  line-height: 20px;
  padding: 2px 7px;
}
.sopcontent {
  border: 1px solid #e9e9e9;
}
</style>
<style>
.example-dialog .el-dialog__header {
  display: none;
}
</style>